<?xml version="1.0" encoding="UTF-8"?>

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:aui="http://liferay.com/faces/aui"
                xmlns:portlet="http://java.sun.com/portlet_2_0">

  <p:panel rendered="#{app.selectableDepartments != null and app.inEditMode}">

    <span style="background-color:#111;opacity: 0.65;*background:none;position:absolute;z-index: 99;top:0px;left:0px;width:100%;"></span>

    <div class="rp-ifeed-popup">

      <h4 class="rp-ifeed-popup-head">Välj</h4>

      <ui:repeat value="#{app.selectableDepartments}" var="selectableDepartment">

        <p:commandLink styleClass="ltr-flowing-item main-item"
                       value="#{selectableDepartment.name} #{selectableDepartment.open ? '(-)' : '(+)'}"
                       update=":ifeed_view"
                       rendered="#{app.inEditMode}"
                       ajax="false" async="true"
                       actionListener="#{selectableDepartment.setOpen(not (selectableDepartment.open))}">
        </p:commandLink>

        <ui:repeat value="#{selectableDepartment.getVgrGroups()}" var="selectableGroup"
                   rendered="#{selectableDepartment.open}">
          <p:commandLink styleClass="ltr-flowing-item sub-item"
                         value="#{selectableGroup.name}"
                         update=":ifeed_view"
                         rendered="#{app.inEditMode}"
                         ajax="false" async="true"
                         actionListener="#{app.putDepartmentAndGroup(selectableDepartment, selectableGroup)}">
          </p:commandLink>
        </ui:repeat>

      </ui:repeat>

    </div>

  </p:panel>


</ui:composition>